<template>
    <div id="employee_index">
        <!--搜索表单-->
        <div class="searchForm">
            <div class="column">
                <span>用户名：</span>
                <el-input style="height: 21px;width: 136px" placeholder="请输入用户名" v-model="searchForm.username"/>
            </div>
            <div class="column">
                <span>姓名：</span>
                <el-input style="height: 21px;width: 100px" placeholder="请输入姓名" v-model="searchForm.nickName"/>
            </div>
            <div class="column">
                <span>年龄：</span>
                <el-input type="number" :min="0" :max="100" style="height: 21px;width: 100px" placeholder="如:18"
                       v-model="searchForm.age"/>
            </div>
            <div class="column">
                <span>住址：</span>
                <el-input style="height: 21px;width: 136px" placeholder="请输入住址" v-model="searchForm.address"/>
            </div>
            <div class="column">
                <span>性别：</span>
                <el-select style="width: 100px" v-model="searchForm.sex"
                           @change="$forceUpdate()"
                           placeholder="如:男"
                           clearable>
                    <el-option label="女" value="0"></el-option>
                    <el-option label="男" value="1"></el-option>
                </el-select>
            </div>

            <div class="column">
                <span>部门：</span>
                <el-select style="width: 200px" v-model="searchForm.deptId"
                           placeholder="请选择部门"
                           filterable
                           @change="$forceUpdate()"
                           clearable>
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="column">
                <el-button type="success" @click="submitSearchForm">搜索</el-button>
                <el-button type="danger" @click="newVisable=true">创建</el-button>
            </div>
        </div>
        <!--表格数据-->
        <div class="table">
            <el-table
                    :data="tableData"
                    style="width: 100%;"
                    size="medium"
                    height="450px">
                <el-table-column
                        prop="username"
                        width="130"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="nickName"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        width="50"
                        prop="sex"
                        label="性别">
                    <template v-slot="scope">
                        {{scope.row.sex=='1'?'男':'女'}}
                    </template>
                </el-table-column>
                <el-table-column
                        width="50"
                        prop="age"
                        label="年龄">
                </el-table-column>
                <el-table-column
                        width="130"
                        :show-overflow-tooltip="true"
                        prop="address"
                        label="住址">
                </el-table-column>
                <el-table-column
                        width="130"
                        :show-overflow-tooltip="true"
                        prop="deptName"
                        label="所属部门">
                </el-table-column>
                <el-table-column
                        width="120"
                        :show-overflow-tooltip="true"
                        prop="createTime"
                        label="入职时间">
                </el-table-column>
                <el-table-column
                        width="120"
                        :show-overflow-tooltip="true"
                        prop="leaveTime"
                        label="离职时间">
                </el-table-column>
                <el-table-column
                        width="120"
                        prop="state"
                        label="状态">
                    <template v-slot="scope">
                        <el-tag v-if="scope.row.state=='0'" type="success">在职</el-tag>
                        <el-tag v-else type="danger">离职</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template v-slot="scope">
                        <el-button size="mini" title="员工详情" type="success" @click="detailBtn(scope.row)"
                                   icon="el-icon-view"
                                   plain></el-button>
                        <el-button size="mini" type="warning" title="修改" @click="editBtn(scope.row.id)"
                                   icon="el-icon-edit"
                                   plain></el-button>
                        <el-button size="mini" type="danger" title="离职办理" @click="delBtn(scope.row)"
                                   icon="el-icon-delete"
                                   plain></el-button>
                        <el-button size="mini" type="danger" title="分配职务" @click="empRoleBtn(scope.row.id)"
                                   icon="el-icon-s-custom"
                                   plain></el-button>

                        <el-button size="mini" type="danger" title="重置密码" @click="resetPwd(scope.row)"
                                   icon="el-icon-refresh"
                                   plain></el-button>
                    </template>

                </el-table-column>
            </el-table>
            <div class="pageUtils">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="searchForm.currentPage"
                        :page-sizes="[3, 5, 7, 9]"
                        :page-size="searchForm.pageSize"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="searchForm.total">
                </el-pagination>
            </div>
        </div>
        <!--用户详情-->
        <el-dialog
                :visible.sync="detailVisable"
                width="50%">
            <el-descriptions :model="detailForm" column="2" title="员工信息">
                <el-descriptions-item label="用户名">{{detailForm.username}}</el-descriptions-item>
                <el-descriptions-item label="性别">{{detailForm.sex=='1'?'男':'女'}}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{detailForm.age}}</el-descriptions-item>
                <el-descriptions-item label="住址">{{detailForm.address}}</el-descriptions-item>
                <el-descriptions-item label="昵称">{{detailForm.nickName}}</el-descriptions-item>
                <el-descriptions-item label="头像"><img :src="detailForm.headImg" width="30px"/></el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag v-if="detailForm.state=='0'" type="success">在职</el-tag>
                    <el-tag v-else type="danger">离职</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="系统管理员">
                    <el-tag v-if="detailForm.isAdmin==true" type="success">是</el-tag>
                    <el-tag v-else type="danger">否</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="描述">
                </el-descriptions-item>
                <el-descriptions-item label="录入者">{{detailForm.createby}}</el-descriptions-item>
                <el-descriptions-item label="所属部门">
                    <el-tag v-if='detailForm.deptName' type="warning">{{detailForm.deptName}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="身份证号">{{detailForm.idCard}}</el-descriptions-item>
                <el-descriptions-item label="入职时间">{{detailForm.createTime}}</el-descriptions-item>
                <el-descriptions-item v-if="detailForm.state!='0'" label="离职时间">{{detailForm.leaveTime}}
                </el-descriptions-item>
                <el-descriptions-item label="角色">
                    <el-tag size="mini" type="success" v-for="item in detailForm.roleNames">{{item}}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
            <el-button type="info" @click="detail_down">关闭</el-button>
        </el-dialog>
        <!--录入-->
        <el-dialog
                title="录入用户"
                :visible.sync="newVisable"
                size="mini"
                @close="dialog_imgClose"
                label-width="200"
                width="50%">
            <el-form :model="newForm" :rules="rules" ref="newForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="头像：">

<!--                            action="http://localhost:9000/personnel_management/employee/uploadImg"-->
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://192.168.43.195:9000/personnel_management/employee/uploadImg"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电话号码：" prop="username">
                            <el-input max="11" v-model="newForm.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名：" prop="nickName">
                            <el-input v-model="newForm.nickName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号：" prop="idCard">
                            <el-input v-model="newForm.idCard"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄：">
                            <el-input type="number" min="18" max="70" v-model="newForm.age"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属部门：">
                            <el-select style="width: 200px" v-model="newForm.deptId"
                                       placeholder="请选择部门"
                                       filterable
                                       @change="$forceUpdate()"
                                       clearable>
                                <el-option
                                        v-for="item in options"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="住址：">
                            <el-input type="text" v-model="newForm.address"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="12">

                        <el-form-item label="员工备注：">
                            <textarea cols="20" rows="3" v-model="newForm.info"></textarea>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别：">
                            <el-select style="width: 200px" v-model="newForm.sex"
                                       @change="$forceUpdate()"
                                       placeholder="请选择性别"
                                       clearable>
                                <el-option label="女" value="0"></el-option>
                                <el-option label="男" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitNewForm('newForm')">提交</el-button>
                    <el-button @click="saveCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--修改-->
        <el-dialog
                title="修改员工"
                @close="dialog_imgClose"
                :visible.sync="editVisable"
                size="mini"
                label-width="200"
                width="50%">
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="头像：">
<!--                            action="http://localhost:9000/personnel_management/employee/uploadImg"-->
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://192.168.43.195:9000/personnel_management/employee/uploadImg"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电话号码：" prop="username">
                            <el-input max="11" v-model="editForm.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名：" prop="nickName">
                            <el-input v-model="editForm.nickName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号：" prop="idCard">
                            <el-input v-model="editForm.idCard"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄：">
                            <el-input type="number" min="18" max="70" v-model="editForm.age"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属部门：">
                            <el-select style="width: 200px" v-model="editForm.deptId"
                                       placeholder="请选择部门"
                                       filterable
                                       @change="$forceUpdate()"
                                       clearable>
                                <el-option
                                        v-for="item in options"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="住址：">
                            <el-input type="text" v-model="editForm.address"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="12">

                        <el-form-item label="员工备注：">
                            <textarea cols="20" rows="3" v-model="editForm.info"></textarea>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别：">
                            <el-select style="width: 200px" v-model="editForm.sex"
                                       @change="$forceUpdate()"
                                       placeholder="请选择性别"
                                       clearable>
                                <el-option label="女" value="0"></el-option>
                                <el-option label="男" value="1"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态：">
                            <el-select style="width: 200px" v-model="editForm.state" placeholder="请选择状态" clearable>
                                <el-option label="在职" value="0"></el-option>
                                <el-option label="离职" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="submitEditForm('editForm')">提交</el-button>
                    <el-button @click="editCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--角色列表-->
        <el-dialog
                title="分配职务"
                :visible.sync="empRoleVisable">
            <div>
                <label>已有职务：</label>
                <el-select disabled size="small" v-model="hasRoleIds"
                           :multiple="true"
                           filterable placeholder="没有职务">
                    <el-option
                            v-for="item in allRoles"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div>
                <label>更改职务：</label>
                <el-select size="small" name="roleIds" v-model="empRoleForm.empRoleIds"
                           :multiple="true"
                           @change="$forceUpdate()"
                           filterable placeholder="请选择职务">
                    <el-option
                            v-for="item in allRoles"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>

            <el-button type="primary" @click="submitRoleBtn">提交</el-button>
            <el-button @click="roleBtnCancel">取消</el-button>

        </el-dialog>
        <!--重置密钥-->
        <el-dialog
                title="重置密码"
                v-model="resetPwdForm"
                :visible.sync="resetPwdVisable">
            <el-form>
                <el-form-item label="密钥：">
                    <el-input style="width:75%;margin: 0 auto;padding: 0" type="password" v-model="resetPwdForm.code"
                              placeholder="请输入密钥"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitResetPwd">确定</el-button>
                <el-button @click="resetPwdVisable=false">取消</el-button>
            </el-form>

        </el-dialog>
    </div>
</template>
<script>
    import {listByQo} from "@/api/personnel_management/department/deptApi";
    import {popup} from "@/assets/js/common";
    import {
        deactivate,
        detail,
        editBtnClick,
        pageByQo,
        resetPwd,
        save,
        update
    } from "@/api/personnel_management/employee/empApi";
    import {getAllRole, queryRoleIdsByEid, saveRoleEmp} from "@/api/system/role/roleApi";
    import {clearCookie, loginEmp} from "@/assets/js/auth";

    export default {
        data() {
            return {
                detailVisable: false,
                newVisable: false,
                editVisable: false,
                empRoleForm: {},
                hasRoleIds: [],
                allRoles: [],
                detailForm: {},
                searchForm: {},
                editForm: {},
                options: [],
                tableData: [],
                resetPwdVisable: false,
                newForm: {
                    
                },
                empRoleVisable: false,
                checked_keys: [],
                roles: [],
                resetPwdForm: {},
                rules: {
                    username: [
                        {required: true, message: '手机号不能为空', trigger: 'blur'},
                    ],
                    nickName: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'},
                    ],
                    idCard: [
                        {required: true, message: '身份证号不能为空', trigger: 'blur'},
                    ],
                },
                /*上传头像*/
                imageUrl: ''
            }
        },
        methods: {
            deptAll() {
                listByQo({}).then(res => {
                    res = res.data;
                    if (res.code == 200) {
                        this.options = res.data
                        popup("操作成功")
                    } else {
                        popup(res.msg, "error")
                    }
                })
            },
            getRoleAll() {
                getAllRole().then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.allRoles = res.data
                    } else {
                        popup(res.msg, "warning")
                    }
                })

            },
            init() {
                pageByQo(this.searchForm).then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.tableData = res.data.records
                        this.searchForm.total = res.data.total
                        this.searchForm.pageSize = res.data.size
                        this.searchForm.currentPage = res.data.current
                    } else {
                        popup(res.msg, "error")
                    }
                })
            },
            /*分页*/
            handleSizeChange(val) {
                this.searchForm.pageSize = val
                this.init()
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.searchForm.currentPage = val
                this.init()
                console.log(`当前页: ${val}`);
            },
            submitSearchForm() {
                this.init()

            },
            detailBtn(row) {
                detail(row.id).then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.detailForm = res.data
                        this.detailForm.deptName = row.deptName
                        this.detailVisable = true
                    } else {
                        popup(res.msg, "error")
                    }
                })
                console.log(this.detailForm)
            },
            detail_down() {
                this.detailForm = {}
                this.detailVisable = false
            },
            /*上传头像*/
            handleAvatarSuccess(res) {
                this.imageUrl = res.url;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 3;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 3MB!');
                }
                return isJPG && isLt2M;
            },
            submitNewForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.newForm.headImg = this.imageUrl
                        save(this.newForm).then(res => {
                            res = res.data
                            if (res.code == 200) {
                                popup("操作成功")
                                this.newForm = {}
                                this.imageUrl = ''
                                this.newVisable = false
                                this.init()
                            } else {
                                popup(res.msg, "error")
                            }
                        })
                    }
                });
            },
            saveCancel() {
                this.newVisable = false
                this.imageUrl = ''
                this.$refs['newForm'].resetFields();


            },
            /*修改员工信息*/
            editCancel() {
                this.editVisable = false
                this.imageUrl = ''
                this.$refs['editForm'].resetFields();
                this.editForm = {}
            },
            editBtn(id) {
                editBtnClick(id).then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.editForm = {...res.data}
                        console.log(this.editForm)
                        this.imageUrl = this.editForm.headImg
                        this.editVisable = true
                    } else {
                        popup(res.msg, "error")
                    }
                })
            },
            submitEditForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.editForm.headImg = this.imageUrl
                        update(this.editForm).then(res => {
                            res = res.data
                            if (res.code == 200) {
                                popup("操作成功")
                                this.editForm = {}
                                this.imageUrl = ''
                                this.editVisable = false
                                this.init()
                            } else {
                                popup(res.msg, "error")
                            }
                        })
                    }
                })
            },
            /*离职*/
            delBtn(row) {
                this.$confirm('确定要将该员工办理离职?', '警示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (row.state == '1') {
                        popup("已是离职状态", "warning")
                        return;
                    }
                    deactivate(row.id).then(res => {
                        res = res.data
                        if (res.code == 200) {
                            popup("操作成功")
                            this.init()
                        } else {
                            popup(res.msg, "error")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            dialog_imgClose(){
                this.imageUrl=''
            },
            /*分配角色按钮*/
            empRoleBtn(id) {
                this.empRoleForm.eid = id
                /*根据员工编号查询角色编号集合*/
                queryRoleIdsByEid(id).then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.empRoleForm.empRoleIds = res.data
                        this.hasRoleIds = res.data
                        this.empRoleVisable = true
                    } else {
                        popup(res.msg, "warning")
                    }
                })
                this.empRoleVisable = true
            },
            submitRoleBtn() {
                if (JSON.stringify(this.hasRoleIds) === JSON.stringify(this.empRoleForm.empRoleIds)) {
                    popup("你未做改动...", "warning")
                } else {
                    this.$confirm('确定修改员工的职务?', '警示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.empRoleForm.empRoleIds = this.empRoleForm.empRoleIds.toString()
                        saveRoleEmp(this.empRoleForm).then(res => {
                            res = res.data
                            if (res.code == 200) {
                                popup("操作成功")
                                this.hasRoleIds = []
                                this.empRoleForm = {}
                                this.empRoleVisable = false
                            } else {
                                this.empRoleForm.empRoleIds = this.hasRoleIds
                                popup(res.msg, "error")
                            }
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                }

            },
            roleBtnCancel() {
                this.empRoleVisable = false
                this.hasRoleIds = []
                this.empRoleIds = []
            },
            /*重置密码按钮*/
            resetPwd(row) {
                this.resetPwdForm = {}
                this.resetPwdForm.eid = row.id;
                this.resetPwdVisable = true
            },
            submitResetPwd() {
                this.$confirm('确定要重置该账户的密码?', '警示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    resetPwd(this.resetPwdForm).then(res => {
                        res = res.data
                        if (res.code == 200) {
                            this.resetPwdVisable = false
                            var emp = loginEmp()
                            if (emp.id == this.resetPwdForm.eid) {
                                clearCookie("employee")
                                clearCookie("token")
                                this.$router.push('/')
                            }
                            this.resetPwdForm = {}
                        popup("密码重置成功")
                        } else {
                            popup(res.msg, "error")
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            }
        },
        mounted() {
            /*初始化所有部门信息*/
            this.deptAll()
            this.getRoleAll()
            /*初始化表格数据*/
            this.init()
        }
    }
</script>
<style>
    .searchForm {
        height: 134px;
    }

    .table {
        background-color: #303133;
        margin: 0 auto;
        height: 320px;
    }

    .pageUtils {
        position: absolute;
        width: 84%;
        margin: 2px auto;
        height: 43px;
    }

    .searchForm {
        display: inline-block;
        margin: 0 auto;
        height: 51px;
        line-height: 51px;
    }

    .searchForm .column {
        display: inline-block;
        margin: 0 auto;
        margin-right: 2px;
        line-height: 48px;
        height: 51px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>